<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" left-text="" right-text="" :title='title1'></uni-nav-bar> -->
		<view class="sorttools">
			<view @click="change('new')" :class="str=='new'?'act':''">新品</view>
			<view @click.self="change('num')" :class="str=='num'?'act':''" class="item">销量
				<view class="icons">
					<uni-icons class='icon' @click="reorder1('up')" :style="str1=='up'?'color:#FF6700':'color:#FFFFFF'" type="arrowup"
					 size="14"></uni-icons>
					<uni-icons class='icon' @click="reorder1('low')" :style="str1=='low'?'color:#FF6700':'color:#FFFFFF'" type="arrowdown"
					 size="14"></uni-icons>
				</view>
			</view>
			<view @click.self="change('price')" :class="str=='price'?'act':''" class="item">价格
				<view class="icons">
					<uni-icons class='icon' @click="reorder2('up')" :style="str2=='up'?'color:#FF6700':'color:#FFFFFF'" type="arrowup"
					 size="14"></uni-icons>
					<uni-icons class='icon' @click="reorder2('low')" :style="str2=='low'?'color:#FF6700':'color:#FFFFFF'" type="arrowdown"
					 size="14"></uni-icons>
				</view>
			</view>
			<view @click="change('choice')" :class="str=='choice'?'act':''">筛选</view>
		</view>


		<view class="like">
			<view @click="togoodsinfo(item.id)" class="item" v-for="item in goodslist" :key='item.id'>
				<image :src="item.pic" mode=""></image>
				<view class="title">
					{{item.name}}
				</view>
				<view class="brandprice">
					<view class="price">
						￥: {{item.price}}元
					</view>
					<view class="brand">
						乐居
					</view>
				</view>
			</view>
		</view>

		<view style="text-align: center;padding: 20rpx 0;" class="">
			没有更多数据了!
		</view>
	</view>

</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {
		findProductList
	} from '../../../api/sort/sortinfo/sortinfo.js'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniNavBar,
			uniIcons
		},
		data() {
			return {
				goodslist: '',
				str: 'new',
				id: '',
				str1: '',
				str2: '',
				start: 1,
				limit: 5,
				title1: null,
				show: false,
				type: '',
				isdes: "",
			};
		},
		methods: {
			// 上拉加载
			onReachBottom() {
				console.log("页面触底");
				if (this.limit * this.start > this.total) {
					this.show = true
				} else {
					this.limit += 5;
					findProductList(this.start, this.limit, {
						categoryId: this.id,
						isDesc: this.isdes,
						sortBy: this.str
					}).then(res => {
						console.log(res);
						this.goodslist = res.data.rows

					})
				}

			},
			// 下拉刷新
			onPullDownRefresh() {
				//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
				findProductList(this.start, this.limit, {
					categoryId: this.id,
					isDesc: this.isdes,
					sortBy: this.str
				}).then(res => {
					console.log(res);
					this.goodslist = res.data.rows
					if (res.success) {
						uni.showToast({
							title: '刷新成功',
							duration: 1000,
							icon: "none"
						})
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					}
				})

				// console.log('refresh');
				// setTimeout(function() {

				// }, 1000);
			},

			// 到商品详细页面
			togoodsinfo(id) {
				console.log(id);
				uni.navigateTo({
					url: `../../home/goodsinfo/goodsinfo?id=${id}`
				})
			},
			// 获取数据
			getdata(type, isdes) {
				this.type = type
				this.isdes = isdes
				findProductList(this.start, this.limit, {
					categoryId: this.id,
					isDesc: isdes,
					sortBy: type
				}).then(res => {
					console.log(res);
					this.goodslist = res.data.rows
					this.total = res.data.total
				})
				// uni.request({
				// 	url: 'http://localhost/lejuClient/product/findProductList/1/10',
				// 	method: 'POST',
				// 	data: {
				// 		categoryId: this.id,
				// 		isDesc: isdes,
				// 		sortBy: type
				// 	},
				// 	success: res => {
				// 		console.log(res)
				// 		this.goodslist = res.data.data.rows
				// 	},
				// })
			},
			// 顶部切换
			change(type) {
				console.log(type);
				this.str = type
				if (type == 'num') {
					this.str1 = 'up'
					this.str2 = ''
					this.getdata('sale', 1)
				} else if (type == 'price') {
					this.str1 = ''
					this.str2 = 'up'
					this.getdata('price', 1)
				} else if (type == 'choice') {
					this.getdata('', 1)
					this.str1 = ''
					this.str2 = ''
				} else {
					this.getdata('', '')
					this.str1 = ''
					this.str2 = ''
				}
			},
			// 排序方式销量
			reorder1(type) {
				this.str = 'sale';
				if (type == 'up') {
					this.getdata('sale', 1)
				} else {
					this.getdata('sale', 0)
				}
				console.log(type);
				this.str1 = type
				this.str2 = ''
			},
			// 排序方式价格
			reorder2(type) {
				this.str1 = ''
				this.str = 'price'
				// this.getdata('price', 1)
				if (type == 'up') {
					this.getdata('price', 1)
				} else {
					this.getdata('price', 0)
				}
				console.log(type);
				this.str2 = type
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.title1 = e.name + '分类';
			console.log(e);
			this.getdata('')
		}
	}
</script>

<style lang="scss" scoped>
	.sorttools {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0rpx;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */

		color: #fff;
		background-color: #354E44;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		font-size: 28rpx;
		justify-content: space-between;
		z-index: 999;

		.act {
			color: #ff6700;
			box-sizing: border-box;
		}

		.item {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;

			.icons {
				padding-left: 10rpx;
				box-sizing: border-box;

				.icon {
					display: flex;
					flex-direction: column-reverse;
					justify-content: space-between;
					box-sizing: border-box;
					line-height: 20rpx;
				}
			}
		}
	}

	//猜你喜欢
	.like {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 670rpx;
		box-sizing: border-box;
		margin: 40rpx auto;
		margin-top: 120rpx;

		.item {
			box-shadow: 0 8rpx 28rpx 0 rgba(122, 98, 75, .12);
			box-sizing: border-box;
			border-radius: 12rpx;
			overflow: hidden;
			background-color: #FFFFFF;
			width: 320rpx;
			height: 420rpx;
			margin-bottom: 40rpx;

			image {
				width: 320rpx;
				height: 240rpx;
				box-sizing: border-box;
			}

			.title {
				font-size: 26rpx;
				padding: 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				box-sizing: border-box;
				margin-top: 20rpx;
			}

			.brandprice {
				margin-top: 40rpx;
				padding: 0 20rpx;
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				font-size: 24rpx;
			}
		}
	}
</style>
